import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
import {SharedService} from "../shared-service";
import {CommService} from "../comm-service";
import {MyhttpService} from "../myhttp.service";
import * as e from "echarts";

declare var $: any;

@Component({
  template: `
    <div class="sjbcrkzl comp" [style.width]="compw" [style.height]="comph" [style.top]="topv"
         [style.left]="leftv">
      <div class="content">
        <div class="title">
          <div class="title_text">{{comptitle}}</div>
        </div>
        <div class="body iecrollkf chromescrollkf">
          <div class="sdiv" [style.width]="itemroomwidth">
            <div class="fl oneitem" *ngFor="let item of crkxqList;index as i">
              <ng-container *ngIf="i==0">
                <div class="day">{{item.bt}}</div>
                <div class="bmk">
                  <div class="mk">
                    <div class="top">
                      <div class="mod">
                        <div *ngFor="let cell of item.list_yscck;let i = index">
                          <div [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#219BF3' }"></div>
                        </div>
                      </div>
                      <div class="item_name">{{item.yscck_jd}}</div>
                    </div>
                    <div class="bom">
                      <span>印刷厂出库</span>
                      <span class="fr">{{item.sjyscck}}</span>
                    </div>
                  </div>
                  <div class="mk">
                    <div class="top">
                      <div class="mod">
                        <div *ngFor="let cell of item.list_bmsrk1;let i = index">
                          <div [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#96BC19' }"></div>
                        </div>
                      </div>
                      <div class="item_name">{{item.bmsrk1_jd}}</div>
                    </div>
                    <div class="bom">
                      <span>保密室入库</span>
                      <span class="fr">{{item.sjbmsrk}}</span>
                    </div>
                  </div>
                </div>
              </ng-container>
              <ng-container *ngIf="i==crkxqList.length-1">
                <div class="day">{{item.bt}}</div>
                <div class="bmk">
                  <div class="mk">
                    <div class="top">
                      <div class="mod">
                        <div *ngFor="let cell of item.list_bmsck1;let i = index">
                          <div [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#219BF3' }"></div>
                        </div>
                      </div>
                      <div class="item_name">{{item.bmsck1_jd}}</div>
                    </div>
                    <div class="bom">
                      <span>保密室出库</span>
                      <span class="fr">{{item.sjbmsck}}</span>
                    </div>
                  </div>
                  <div class="mk">
                    <div class="top">
                      <div class="mod">
                        <div *ngFor="let cell of item.list_pjzxrk;let i = index">
                          <div [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#96BC19' }"></div>
                        </div>
                      </div>
                      <div class="item_name">{{item.pjzxrk_jd}}</div>
                    </div>
                    <div class="bom">
                      <span>评卷中心入库</span>
                      <span class="fr">{{item.sjpjzxrk}}</span>
                    </div>
                  </div>
                </div>
              </ng-container>
              <ng-container *ngIf="i!=0&&i!=crkxqList.length-1">
                <div class="day">{{item.bt}}</div>
                <div class="bmk">
                  <div class="mk">
                    <div class="mkfirst">
                      <div class="topd">
                        <div class="modd">
                          <div *ngFor="let cell of item.list_bmsck;let i = index">
                            <div [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#FAD445' }"></div>
                          </div>
                        </div>
                        <div class="item_name">{{item.bmsck_jd}}</div>
                      </div>
                      <div class="sm">
                        <div>保密室出库</div>
                        <div>{{item.sjbmsck}}</div>
                      </div>
                    </div>
                    <div class="jt"><img style="width:100%" src="assets/img/zhzs/jt.png"></div>
                    <div class="mksecond">
                      <div class="topd">
                        <div class="modd">
                          <div *ngFor="let cell of item.list_kdrk;let i = index">
                            <div [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#F19C2F' }"></div>
                          </div>
                        </div>
                        <div class="item_name">{{item.kdrk_jd}}</div>
                      </div>
                      <div class="sm">
                        <div>考点入库</div>
                        <div>{{item.sjkdrk}}</div>
                      </div>
                    </div>
                  </div>
                  <div class="mk">
                    <div class="mkfirst">
                      <div class="topd">
                        <div class="modd">
                          <div *ngFor="let cell of item.list_kdck;let i = index">
                            <div [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#FAD445' }"></div>
                          </div>
                        </div>
                        <div class="item_name">{{item.kdck_jd}}</div>
                      </div>
                      <div class="sm">
                        <div>考点出库</div>
                        <div>{{item.sjkdck}}</div>
                      </div>
                    </div>
                    <div class="jt"><img style="width:100%" src="assets/img/zhzs/jt.png"></div>
                    <div class="mksecond">
                      <div class="topd">
                        <div class="modd">
                          <div *ngFor="let cell of item.list_bmsrk;let i = index">
                            <div [ngStyle]="{'background-color':cell == false ? '#B7D0E6' : '#F19C2F' }"></div>
                          </div>
                        </div>
                        <div class="item_name">{{item.bmsrk_jd}}</div>
                      </div>
                      <div class="sm">
                        <div>保密室入库</div>
                        <div>{{item.sjbmsrk}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </ng-container>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [
    ".sjbcrkzl{position:absolute;background-color:#fff;border:5px solid #ccc;}",
    ".content{width: calc(100%);height: calc(100%);}",
    ".content>.title{position: relative;width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
    ".title_btns{position: absolute;right: 0px;top: 0px;width: 60px;height: 24px;line-height: 24px}",
    ".title_btns>span:first-child{display: inline-block;width: 30px;text-align: center;font-size: 18px;cursor: pointer}",
    ".title_btns>span:last-child{display: inline-block;width: 30px;text-align: center;font-size: 20px;cursor: pointer}",
    ".content>.body{width: 100%;height: calc(100% - 44px);padding: 16.5px 10px;overflow-x: auto;overflow-y: hidden}",
    ".sdiv{position: relative;height:246px;color: rgb(138 143 151);font-size: 13px;font-weight: bold;overflow: hidden}",
    ".fl{float:left;border:2px solid #fff;}",
    ".oneitem{width: 260px}",
    ".day{width: 100%;height: 30px;line-height: 30px;text-align: center;color: rgb(138 143 151);font-size: 13px;font-weight: bold;background-color:rgb(206, 232, 255);}",
    ".bmk{height: 225px;background-color: rgb(245, 250, 255);}",
    ".mk{padding:20px 5px;height:105px;}",
    ".sm{margin:10px 5px}",
    ".mkfirst{width:100px;float:left}",
    ".mksecond{width:110px;float:right}",
    ".st{height:30px;}",
    ".jt{float:left;color:#F19C2F;margin-top: 40px;}",
    ".color1{background-color:#FAD445;}",
    ".color2{background-color:#96BC19;}",
    ".color3{background-color:#219BF3;}",
    ".color4{background-color:#B7D0E6;}",
    ".color5{background-color:#F19C2F;}",
    ".mod{width:180px;height:30px;float:left}",
    ".mod div{width:12px;height:30px;float:left;margin-right:3px;}",
    ".top{width:217px;height:30px;}",
    ".bom{margin:10px 5px;padding-right: 20px}",
    ".bom>span:first-child{display: inline-block;width: 180px}",
    ".bom>span:last-child{display: inline-block;width: calc(100% - 180px)}",
    ".item_name{float:left;width:calc(100% - 180px);height:30px;line-height:30px;}",
    ".topd{height:30px;}",
    ".modd{height:30px;float:left}",
    ".modd div{width:12px;height:30px;float:left;margin-right:3px;}",
  ]
})
export class ZhzsSjbcrkzlComponent implements OnInit, OnDestroy {
  compw: string = "0px";
  comph: string = "0px";
  topv: string = "0px";
  leftv: string = "0px";
  comptitle: string = "";
  s_kqbh: string = "";
  s_ksjhbh: string = "";

  crkxqList: any[] = [];
  itemroomwidth: string = "0px";
  lockid: any;
  intervalnum: number = 10 * 60 * 1000;


  getData(): void {
    if (!this.s_kqbh || !this.s_ksjhbh) {
      return
    }
    const url = "sjgz/zsymlsfw/sjbcrkzl";
    this.itservice.kwPtPost(url, {
      kqbh: this.s_kqbh,
      ksjhbh: this.s_ksjhbh
    }).subscribe(resp => {
      this.commservice.handResponse("get", url, resp, (arg1, resp, arg2) => {
        if (arg1) {
          if (arg2) {
            const crkzlsjList = resp.crkzlsjList;
            if (crkzlsjList && crkzlsjList.length) {
              crkzlsjList.forEach((item) => {
                item["rqms"] = this.commservice.convertTimeToInt(item.rq);
              });
              const orderlist = this.commservice.sortArr(crkzlsjList, "rqms", 'asc');
              this.itemroomwidth = `${260 * orderlist.length}px`;
              this.crkxqList = orderlist.map((item, index) => {
                const newobj = {
                  bt: item.bt,
                  jhyscck: item.jhyscck,
                  sjyscck: item.sjyscck,
                  jhbmsrk: item.jhbmsrk,
                  sjbmsrk: item.sjbmsrk,
                  jhbmsck: item.jhbmsck,
                  sjbmsck: item.sjbmsck,
                  jhkdrk: item.jhkdrk,
                  sjkdrk: item.sjkdrk,
                  jhkdck: item.jhkdck,
                  sjkdck: item.sjkdck,
                  jhpjzxrk: item.jhpjzxrk,
                  sjpjzxrk: item.sjpjzxrk,
                  yscck_jd: "0%",
                  list_yscck: [],
                  bmsrk1_jd: "0%",
                  list_bmsrk1: [],
                  bmsck_jd: "0%",
                  list_bmsck: [],
                  kdrk_jd: "0%",
                  list_kdrk: [],
                  kdck_jd: "0%",
                  list_kdck: [],
                  bmsrk_jd: "0%",
                  list_bmsrk: [],
                  bmsck1_jd: "0%",
                  list_bmsck1: [],
                  pjzxrk_jd: "0%",
                  list_pjzxrk: []
                };
                if (index == 0) {
                  // 计算进度
                  let yscck_jdv = 0, bmsrk_jdv = 0, yscck_jdv1 = 0, bmsrk_jdv1 = 0;
                  if (item.jhyscck) {
                    yscck_jdv = Math.ceil(item.sjyscck / item.jhyscck * 10); //印刷厂出库,四舍五入
                    yscck_jdv1 = item.sjyscck / item.jhyscck * 100; // 印刷厂出库
                  }
                  if (item.jhbmsrk) {
                    bmsrk_jdv = Math.ceil(item.sjbmsrk / item.jhbmsrk * 10); //保密室入库，四舍五入
                    bmsrk_jdv1 = item.sjbmsrk / item.jhbmsrk * 100; //保密室入库
                  }
                  newobj.yscck_jd = `${yscck_jdv1.toFixed(1)}%`; // 保留一位小数
                  newobj.bmsrk1_jd = `${bmsrk_jdv1.toFixed(1)}%`;// 保留一位小数
                  for (let i = 0; i < 10; i++) {
                    if (i < yscck_jdv) {
                      newobj.list_yscck.push(true);
                    } else {
                      newobj.list_yscck.push(false);
                    }
                    if (i < bmsrk_jdv) {
                      newobj.list_bmsrk1.push(true);
                    } else {
                      newobj.list_bmsrk1.push(false);
                    }
                  }
                } else if (index == orderlist.length - 1) {
                  // 计算进度
                  let bmsck1_jdv = 0, pjzxrk_jdv = 0, bmsck1_jdv1 = 0, pjzxrk_jdv1 = 0;
                  if (item.jhbmsck) {
                    bmsck1_jdv = Math.ceil(item.sjbmsck / item.jhbmsck * 10); //保密室出库, 四舍五入
                    bmsck1_jdv1 = item.sjbmsck / item.jhbmsck * 100; //保密室出库
                  }
                  if (item.jhpjzxrk) {
                    pjzxrk_jdv = Math.ceil(item.sjpjzxrk / item.jhpjzxrk * 10); //评卷中心入库,四舍五入
                    pjzxrk_jdv1 = item.sjpjzxrk / item.jhpjzxrk * 100; //评卷中心入库
                  }
                  newobj.bmsck1_jd = `${bmsck1_jdv1.toFixed(1)}%`; // 保留一位小数
                  newobj.pjzxrk_jd = `${pjzxrk_jdv1.toFixed(1)}%`;// 保留一位小数
                  for (let i = 0; i < 10; i++) {
                    if (i < bmsck1_jdv) {
                      newobj.list_bmsck1.push(true);
                    } else {
                      newobj.list_bmsck1.push(false);
                    }
                    if (i < pjzxrk_jdv) {
                      newobj.list_pjzxrk.push(true);
                    } else {
                      newobj.list_pjzxrk.push(false);
                    }
                  }
                } else {
                  // 计算进度
                  let bmsck_jdv = 0, kdrk_jdv = 0, kdck_jdv = 0, bmsrk_jdv = 0;
                  let bmsck_jdv1 = 0, kdrk_jdv1 = 0, kdck_jdv1 = 0, bmsrk_jdv1 = 0;
                  if (item.jhbmsck) {
                    bmsck_jdv = Math.ceil(item.sjbmsck / item.jhbmsck * 5); //保密室出库,四舍五入
                    bmsck_jdv1 = item.sjbmsck / item.jhbmsck * 100; //保密室出库,
                  }
                  if (item.jhkdrk) {
                    kdrk_jdv = Math.ceil(item.sjkdrk / item.jhkdrk * 5); //考点入库,四舍五入
                    kdrk_jdv1 = item.sjkdrk / item.jhkdrk * 100;
                  }
                  if (item.jhkdck) {
                    kdck_jdv = Math.ceil(item.sjkdck / item.jhkdck * 5); //考点出库,四舍五入
                    kdck_jdv1 = item.sjkdck / item.jhkdck * 100;
                  }
                  if (item.jhbmsrk) {
                    bmsrk_jdv = Math.ceil(item.sjbmsrk / item.jhbmsrk * 5); //保密室入库 ,四舍五入
                    bmsrk_jdv1 = item.sjbmsrk / item.jhbmsrk * 100;
                  }
                  newobj.bmsck_jd = `${bmsck_jdv1.toFixed(1)}%`; // 保留一位小数
                  newobj.kdrk_jd = `${kdrk_jdv1.toFixed(1)}%`;  // 保留一位小数
                  newobj.kdck_jd = `${kdck_jdv1.toFixed(1)}%`; // 保留一位小数
                  newobj.bmsrk_jd = `${bmsrk_jdv1.toFixed(1)}%`; // 保留一位小数
                  for (let i = 0; i < 5; i++) {
                    if (i < bmsck_jdv) {
                      newobj.list_bmsck.push(true);
                    } else {
                      newobj.list_bmsck.push(false);
                    }
                    if (i < kdrk_jdv) {
                      newobj.list_kdrk.push(true);
                    } else {
                      newobj.list_kdrk.push(false);
                    }
                    if (i < kdck_jdv) {
                      newobj.list_kdck.push(true);
                    } else {
                      newobj.list_kdck.push(false);
                    }
                    if (i < bmsrk_jdv) {
                      newobj.list_bmsrk.push(true);
                    } else {
                      newobj.list_bmsrk.push(false);
                    }
                  }
                }
                return newobj;
              });
              this.commservice.log("渲染使用数据", this.crkxqList);
            }
          }
        }
      });
    })
  };

  /**
   * 组件在 显示面板中的位置+ 大小
   */
  initcompPositionSize_ctrshow(): void {
    // 大小 位置
    this.compw = this.o.compw + "px";
    this.comph = this.o.comph + "px";
    this.topv = this.o.topv + "px";
    this.leftv = this.o.leftv + "px";
    const lastsearchlx = this.o.paramchangelx;
    const compdata = this.o.paramchangedata;
    if (lastsearchlx === "pcompkqchange") {
      this.s_kqbh = compdata.kqbh;
      this.s_ksjhbh = compdata.ksjhbh;
      this.comptitle = `【${compdata.kqmc}】 试卷包出入库情况总览`;
      this.getData();
      this.lockid = setInterval(() => {
        this.getData();
      }, this.intervalnum);

    } else {
      this.s_kqbh = compdata.kqbh;
      this.s_ksjhbh = compdata.ksjhbh;
      this.comptitle = `【${compdata.kqmc}】 试卷包出入库情况总览`;
      this.getData();
    }
  }

  @Input() o: any;
  @Output() outhander: EventEmitter<any> = new EventEmitter<any>();

  constructor(private commservice: CommService,
              private itservice: MyhttpService,
              private sharedService: SharedService) {
    this.sharedService.changeEmitted$.subscribe(resp => {
      const actiontype = resp.actiontype;
      const frompage = resp.frompage;
      const paramchangelx = resp.paramchangelx;
      const paramchangedata = resp.paramchangedata;
      switch (frompage) {
        case "zhzs": {
          if (paramchangelx === "pcompkqchange") {
            this.s_kqbh = paramchangedata.kqbh;
            this.s_ksjhbh = paramchangedata.ksjhbh;
            this.comptitle = `【${paramchangedata.kqmc}】 试卷包出入库情况总览`;
            this.getData();
          }
        }
          break;
      }
    });
  }

  ngOnInit() {
    this.commservice.log("-- 【 compkey=sjbcrkzl】--被父组件动态加载init....", this.o);
    this.initcompPositionSize_ctrshow();
  }

  ngOnDestroy() {
    if (this.lockid) {
      clearInterval(this.lockid);
    }
  }

}
